import {increment,decrement,addValue,addSync} from './store/counterSlice'
import {useDispatch,useSelector,useStore} from 'react-redux'
import { useEffect } from 'react';
function App() {
  const count = useSelector(state=>state.counter.value)
  const dispatch = useDispatch();
  // console.log(increment())
  const store = useStore();
 
  useEffect(()=>{
    store.subscribe(()=>{
      console.log("store发生变化",store.getState())
    })
  },[])
  return ( <div>
    <h3>redux</h3>
    <p>仓库中的数：{count}</p>
    <button onClick={() => dispatch(increment())} >+1</button>
    <button onClick={() => dispatch(decrement())} >-1</button>
    <button onClick={() => dispatch(addValue(3))} >+3</button>
    <p>store三个方法  dispatch</p>
    <button onClick={()=>store.dispatch({type:"counter/increment"})}>+</button>
    <button onClick={()=>store.dispatch({type:"counter/decrement"})}>-</button>
    <button onClick={()=>store.dispatch({type:"counter/addValue",payload:5})}>+5</button>
    <p>getstate：{store.getState().counter.value}</p>
    <p>异步方法</p>
    <button onClick={()=>dispatch(addSync(8))}>+8</button>
    <button onClick={()=>addSync(10)(dispatch)}>+10</button>

  </div> );
}

export default App;